<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv=X-UA-Compatible content="IE=edge">
		<meta name=viewport content="width=device-width,initial-scale=1">
		
		<title>歌词编辑器 - 2024.07.02</title>
		<!-- import CSS -->
		<link rel="stylesheet" href="./style/element-ui@2.15.13.css" />
		<!-- <link rel="stylesheet" href="https://unpkg.com/element-ui@2.15.13/lib/theme-chalk/index.css" /> -->
	</head>
	<body>
		<div id="app">
			<router-view></router-view>
		</div>
	</body>
	<!-- import Vue before Element -->
	<script src="./script/vue@2.7.16.js"></script>
	<!-- 开发环境版本 -->
	<!-- <script src="https://unpkg.com/vue@2.7.16/dist/vue.js"></script> -->
	<!-- 生产环境版本 -->
	<!-- <script src="https://unpkg.com/vue@2.7.16/dist/vue.min.js"></script> -->	

	<!-- import Vue Router -->
	<script src="./script/vue-router@3.6.5.js"></script>
	<!-- <script src="https://unpkg.com/vue-router@3.6.5/dist/vue-router.js"></script> -->

	<!-- import JavaScript -->
	<script src="./script/element-ui@2.15.13.js"></script>
	<!-- <script src="https://unpkg.com/element-ui@2.15.13/lib/index.js"></script> -->
	
	<!-- 解决 chrome 报错 [Violation]Added non-passive event listener to a scroll-blocking 'mousewheel' event. Consider marking event handler as 'passive' to make the page more responsive -->
	<script src="./script/default-passive-events@2.0.0.js"></script>

	<!-- 文件保存 -->
	<script src="./script/FileSaver@2.0.5.js"></script>

	<!-- 读取媒体文件tags信息 -->
	<script src="./script/jsmediatags@3.9.7.min.js"></script>


	<!-- import view -->
	<script src="./view/root.js"></script>
	<script src="./view/TODO.js"></script>

	<script>
class Lyric {
	constructor(value) {
		this.Time = null;	
		this.Text = value;

		this.IsError = false; // 比上一句歌词的时间要小
		this.TimeSecond = null; // 类型 float, 用于定位播放位置		

		// 检查是否带时间标记
		const timeMatch = /\[(\d+:\d+\.\d+)](.*)/.exec(value);
		if (timeMatch) {
			this.Time = timeMatch[1];
			this.TimeSecond = timeToSeconds(timeMatch[1]);
			this.Text = timeMatch[2];				
		}
	}

	get Display() {
		return this.Time ? `[${this.Time}]${this.Text}` : this.Text;
	}
}

// TODO 整理到工具类
function formatTime(seconds) {
	const minutes = Math.floor(seconds / 60);
	const remainingSeconds = seconds % 60;
	return `${String(minutes).padStart(2, '0')}:${String(remainingSeconds.toFixed(2)).padStart(5, '0')}`;
}

function timeToSeconds(timeString) {
	// 将时间字符串拆分成分钟、秒和毫秒部分
	const parts = timeString.split(':');
	if (parts.length !== 2) {
		throw new Error('无效的时间格式');
	}
	
	const minutes = parseFloat(parts[0]);
	const secondsAndMilliseconds = parts[1].split('.');
	if (secondsAndMilliseconds.length !== 2) {
		throw new Error('无效的时间格式');
	}
	
	const seconds = parseFloat(secondsAndMilliseconds[0]);
	const milliseconds = parseFloat(secondsAndMilliseconds[1]);

	// 计算总秒数
	const totalSeconds = minutes * 60 + seconds + milliseconds / 100;

	return totalSeconds;
}


		//#region 创建路由实例并配置路由规则
		const routerArr = [
				{ path: '/', component: view_root, IsIgnore: true }, // 根路由
				{ path: '/view/Screen', component: view_TODO, DisplayName: "屏幕" },
				{ path: '/view/Audio', component: view_TODO, DisplayName: "音频" },
		];

		const router = new VueRouter({ routes: routerArr });
		//#endregion		

		var vueApp = new Vue({
			el: "#app",
			router, // 注入路由
			data: function () {
				return {

				};
			},
			methods: {
				
			}
		});
	</script>
	<style>
.el-table .warning-row {
background: oldlace;
}

.el-table .success-row {
background: #f0f9eb;
}

.el-table .cell {
	font-size: 23px;
}
	</style>
</html>
